import React from 'react';
import {Link} from 'react-router';
import $ from 'jquery';
require('../../css/block-btn');

export default class BlockBtn extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            data: this.props.data
        };
        this.handleClick = this.handleClick.bind(this)
    }
    renderBtn(data){
        let _style = {
            height: this.props.height+'px',
            width: $(window).width()/this.props.cols+'px'
        };
        let _rightBorder = {
            borderRight: '1px solid #eee',
            height: (this.props.height-32)+'px',
        };
        let _rightNonBorder = {
            borderRight: 'none',
            height: (this.props.height-32)+'px',
        };
        let _dom = [];
        const url = this.props.url;
        for(let _d in data){
            let to = url+':'+_d;
            if(data[_d].state){
                _dom.push(
                    <li key={_d} style={_style}>
                        <Link to={to} style={(_dom.length+1)%this.props.cols == 0?_rightNonBorder:_rightBorder}>
                            <img src={`../src/img/${this.props.ico}/${_d}.png`}  />
                            <span>{data[_d].name}</span>
                        </Link>
                    </li>
                )
            }
        }
        return _dom
    }
    handleClick(){}
    render(){
        return (
            <ul className="block-btn">
                {this.renderBtn(this.props.data)}
            </ul>
        )
    }
}